Vue.component("j-pictorial-setting", {
  template: `<Submenu  name="8" style="border-bottom: inset 1px;" class="rightFontSize">
        <template slot="title">
            <span>象形图设置</span>
        </template>
        <div class="blockDiv" style="padding-bottom: 10px">
            <Row class="ivurow" >
               <span title="建议上传至服务器本地,若上传至云服务器,可能导出/打印等功能不可用" style="display: inline-block;line-height:0px;height: 20px;width: 53px;vertical-align:middle">图标</span>
                <Upload
                        :headers = "uploadHeaders"
                        ref="upload"
                        :show-upload-list="false"
                        :default-file-list="pictorialIcon"
                        :on-exceeded-size="(e)=>handleMaxSize(e,2)"
                        :on-success="uploadSuccess"
                        :format="['jpg','jpeg','png']"
                        :max-size="2048"
                        :data="localUpload"
                        :action=" actionUrlPre + '/jmreport/upload' "
                        style="display: inline-block;width:58px;">
                    <div class="pictorial-icon-upload">
                        <img style="width: 36px;height:36px" ref="symbol" :src="getPathBySymbol()"/>
                        <div class="cover">
                            <Icon type="ios-create-outline"/>
                        </div>
                    </div>
                </Upload>
            </Row>
            <Row class="ivurow" >
                <p>图标大小&nbsp;&nbsp;</p>
                <i-input size="small" v-model="pictorialOptions.symbolSize" @on-blur="onPictorialChange" class="iSelect"></i-input>
            </Row>
            <Row class="ivurow">
                <p>图标间距&nbsp;&nbsp;</p>
                <i-input  type="number" size="small" :value="util.getNumberFromPercent(pictorialOptions.symbolMargin,'!')" @on-blur="(e)=>onPercentChange(e.target.value, 'pictorialOptions.symbolMargin','onPictorialChange','!')" class="iSelect"> <span slot="append">%</span></i-input>
            </Row>

            <Row class="ivurow" >
                <p>最大值&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                <i-input size="small" v-model="pictorialOptions.symbolBoundingData" @on-blur="onPictorialChange" class="iSelect"></i-input>
            </Row>

            <Row class="ivurow">
                <p>是否补全&nbsp;&nbsp;</p>
                <i-switch size="small" style="margin-left: 119px;" v-model="pictorialOptions.double" @on-change="onPictorialChange"/>
            </Row>
            <Row class="ivurow" v-if="pictorialOptions.double">
                <p>透明度&nbsp;&nbsp;</p>
                <slider max="1" step="0.1" v-model="pictorialOptions.secondOpacity" @on-change="onPictorialChange" style="margin-top: -9px;width: 110px;margin-left: 5px;" ></slider>
            </Row>
        </div>
    </Submenu>`,
  props: {
    settings: {
      type: Object,
      required: true,
      default: () => {},
    },
    isMultiChart: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      //象形图 图标配置
      pictorialIcon: [{ name: "pictorialIcon", url: "" }],
      actionUrlPre: baseFull,
      pictorialOptions: {},
      localUpload: {
        bizType: "local",
      },
      uploadHeaders: {},
    };
  },
  watch: {
    settings: {
      deep: true,
      immediate: true,
      handler: function () {
        this.initData();
      },
    },
  },
  methods: {
    initData: function () {
      if (this.settings) {
        this.pictorialOptions = Object.assign(
          this.pictorialOptions,
          this.settings
        );
      }
      this.uploadHeaders = vm.uploadHeaders;
    },
    getPathBySymbol() {
      let symbol = this.pictorialOptions["symbol"];
      if (!symbol) {
        let path =
          baseFull + "/jmreport/desreport_/chartsImg/pictorialIcon/spirits.png";
        return path;
      } else {
        return symbol.replace("image://", "");
      }
    },
    //图片上传文件大小
    handleMaxSize(file, size) {
      console.log("file===>", file);
      console.log("size===>", size);
      this.$Notice.warning({
        title: "超出文件大小限制",
        desc: "文件  " + file.name + " 太大，请上传" + size + "M以内图片",
        duration: 6,
      });
    },
    //slider 百分数改变事件
    onPercentChange(value, key, eventName, suffix = "") {
      let arr = key.split(".");
      if (arr.length > 1) {
        let temp = this;
        for (let i = 0; i < arr.length - 1; i++) {
          temp = temp[arr[i]];
        }
        temp[arr[arr.length - 1]] = value + "%" + suffix;
      } else {
        this[key] = value + "%" + suffix;
      }
      //this[eventName]();
      this.onPictorialChange();
    },
    uploadSuccess(res) {
      this.$emit("upload-success", res, (symbol) => {
        this.pictorialOptions["symbol"] = symbol;
        this.$forceUpdate(() => {
          this.getPathBySymbol();
        });
      });
    },
    onPictorialChange() {
      this.$emit("change", this.pictorialOptions);
    },
  },
});
